<template>
    <!-- main S -->
    <view class="main">
        <!-- top S -->
        <view class="top">
            <view class="imgBox box">
                <image src="../../static/logo.png" mode=""></image>
            </view>
            <view class="numberBox box">
                <text>1760078235</text>
                <text>倔强青铜</text>
            </view>
            <view class="clear_both"></view>
        </view>
        <!-- top E -->
        <!-- center S -->
        <view class="center">
            <view class="rowBox redPack">
                <text>我的红包</text>
                <view class="content">
                    <text>1109.3</text>
                    <text> > </text>
                    <view class="clear_both"></view>
                </view>
            </view>
            <view class="rowBox tool">
                <text>我的工具</text>
                <!-- <view class="content">
                    <text>我的粉丝</text>
                    <text> > </text>
                    <view class="clear_both"></view>
                </view>
                <view class="content">
                    <text>新手手册</text>
                    <text> > </text>
                    <view class="clear_both"></view>
                </view>
                <view class="clear_both"></view> -->
                <view class="content" @click="goCode()">
                    <text>获取分享码</text>
                    <text> > </text>
                    <view class="clear_both"></view>
                </view>
                <view class="clear_both"></view>
            </view>
        </view>
        <!-- center E -->
    </view>
    <!-- main E -->
</template>

<script>
    export default {
        data() {
            return {
                title: 'My',
            }
        },
        onLoad() {

        },
        methods: {
            goCode() {
                uni.navigateTo({
                    url:'./code'
                })
            }
        }
    }
</script>

<style>
    .top {
        background-color: #FFFFFF;
        width: 95%;
        margin: 0 auto;
        border-radius: 25rpx;
    }

    .top>.box {
        float: left;
        padding: 50rpx 20rpx 50rpx 20rpx;
        height: 200rpx;
    }

    .top>.imgBox {
        width: 200rpx;
        margin-right: 20rpx;
    }

    .imgBox>image {
        height: 100%;
        width: 100%;
        border-radius: 50%;
        border: 10rpx solid red;
    }

    .top>.numberBox {
        border: 0rpx solid red;
        width: 400rpx;
    }

    .numberBox>text {
        display: block;
        border: 0rpx solid red;
    }

    .numberBox>text:nth-child(1) {
        height: 100rpx;
        line-height: 100rpx;
        font-size: 40rpx;
        color: #808080;
        font-weight: bold;
        margin-top: 20rpx;
    }

    .numberBox>text:nth-child(2) {
        border: 1rpx solid #007AFF;
        width: 180rpx;
        height: 60rpx;
        line-height: 60rpx;
        text-align: center;
        border-radius: 45%;
        margin-top: 20rpx;
    }

    .main>.center {}

    .center>.rowBox {
        width: 95%;
        border: 0rpx solid red;
        background: #ffffff;
        margin: 0 auto;
        margin-top: 20rpx;
        padding-bottom: 20rpx;
    }

    .center>.rowBox>text {
        display: inline-block;
        border-bottom: 6rpx solid #F1F1F1;
        width: 96%;
        height: 100rpx;
        font-size: 40rpx;
        font-weight: bold;
        line-height: 100rpx;
        padding-left: 20rpx;
    }

    .center>.redPack>.content>text {
        display: block;
        border: 0rpx solid red;
        width: 48%;
        float: left;
        height: 100rpx;
    }

    .center>.redPack>.content>text:nth-child(1) {
        color: red;
        font-weight: bold;
        font-size: 80rpx;
        margin-left: 20rpx;
        text-align: left;
    }

    .center>.redPack>.content>text:nth-child(2) {
        font-size: 60rpx;
        line-height: 100rpx;
        border: 0rpx solid red;
        text-align: right;
        color: gray;
    }

    .center>.tool>.content {
        border-bottom: 2rpx solid #f1f1f1;
        line-height: 80rpx;
        height: 80rpx;
    }

    .center>.tool>.content>text {
        display: block;
        border: 0rpx solid red;
        width: 48%;
        float: left;
    }

    .center>.tool>.content>text:nth-child(1) {
        padding-left: 20rpx;
        font-size: 32rpx;
        text-align: left;
    }

    .center>.tool>.content>text:nth-child(2) {
        font-size: 60rpx;
        text-align: right;
        color: gray;
    }
</style>
